class Index {
    constructor() {
        this.bindEve()
        this.getData()
    }
    // 添加事件
    bindEve() {
        this.$('.btn-add').addEventListener('click', this.addData.bind(this))
        // 给tbody绑定点击事件
        this.$('.table tbody').addEventListener('click', this.dispatch.bind(this))
        // 确认删除
        this.$('.btn-sure-del').addEventListener('click', this.sureDel)
        // 确认修改
        this.$('.btn-modify').addEventListener('click', this.sureModify.bind(this))
    }

    /******事件委托实现删除和修改*******/
    dispatch(eve) {
        // 判断是删除还是修改
        if (eve.target.classList.contains('btn-del')) { // 删除
            // console.log(eve.target);
            this.alertDelModal(eve.target)
        }

        if (eve.target.classList.contains('btn-modify')) { // 修改
            this.alertModifyModal(eve.target)
        }
    }
    /***弹出修改模态框***/
    alertModifyModal(ter) {
        let tr = ter.parentNode.parentNode

        let tds = tr.children
        // 获取要修改的数据
        this.modifyId = tds[0].innerHTML
        let title = tds[1].innerHTML
        let pos = tds[2].innerHTML
        let idea = tds[3].innerHTML
        // 获取input框
        let form = document.forms.modifyForm.elements
        form.title.value = title
        form.pos.value = pos
        form.idea.value = idea
        $('#modifyModal').modal('show')
    }
    /****确认删除****/
    sureModify() {
        // console.log(111);
        // 获取表单中的数据
        let form = document.forms.modifyForm.elements
        let title = form.title.value
        let pos = form.pos.value
        let idea = form.idea.value

        // 发送ajax修改数据
        axios.patch('http://localhost:3000/data/' + this.modifyId, {
            title,
            pos,
            idea
        }).then(({ status }) => {
            location.reload()
        })
    }
    /****弹出删除模态框****/
    alertDelModal(tar) {
        // console.log(tar);
        // 找到当前数据的tr 将他设定为属性
        this.readyDelTr = tar.parentNode.parentNode
        // console.log(this.readyDelTr);
        $('#sureDel').modal('show')
    }
    /*****确认删除*****/
    sureDel = () => {
        // console.log(this.readyDelTr);
        // 删除tr节点，删除数据库数据
        // 获取id
        let id = this.readyDelTr.firstElementChild.innerHTML
        // console.log(id);
        axios.delete('http://localhost:3000/data/' + id).then(({ status }) => {
            // console.log(status);
            if (status == 200) {
                // 关闭模态框
                $('#sureDel').modal('hide')
                // 删除tr
                this.readyDelTr.remove()
            }
        })
    }
    /******添加******/
    addData() {
        // console.log(this);

        // 收集表单数据
        let form = document.forms.addForm.elements;
        // console.log(form);

        // 获取input中具体的值
        let title = form.title.value.trim()
        let pos = form.pos.value.trim()
        let idea = form.idea.value.trim()
        // console.log(title, pos, idea);

        // 非空验证
        if (!title || !pos || !idea) throw new Error('请输入全部信息')

        // 发送ajax保存数据
        axios.post('http://localhost:3000/data', {
            title,
            pos,
            idea
        })
            .then(function (response) {
                // console.log(response);

                // 成功刷新页面
                if (response.status == 201) {
                    location.reload()
                };
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    /*******获取数据*******/
    async getData() {
        let { data, status } = await axios.get('http://localhost:3000/data')
        // console.log(data);
        // 判断请求状态
        if (status == 200) {
            let html = '';
            data.forEach(ele => {
                html += `<tr>
                <th scope="row">${ele.id}</th>
                <td>${ele.title}</td>
                <td>${ele.pos}</td>
                <td>${ele.idea}</td>
                <td><button type="button" class="btn btn-danger btn-xs btn-del">删除</button><button type="button" class="btn btn-info btn-xs btn-modify">修改</button></td>
                </tr>`
            })
            // 追加到页面中去
            this.$('table tbody').innerHTML = html
        }
    }
    // 获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res;
    }
}

new Index; 